<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree Selector Demo</title>

<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dijit/themes/tundra/tundra.css";

@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojox/layout/resources/FloatingPane.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojox/layout/resources/ResizeHandle.css";

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

pre {
    font-family: "Lucida Console", "Courier New", Courier, monospace;
}

div.container {
    border: 0px solid green;
    margin: 10px;
}
</style>

<script type="text/javascript">
var djConfig = {
    isDebug: true,
    parseOnLoad: true,
    locale: "en"
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js"></script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.date.locale");
    dojo.require("dojo.parser");

    dojo.require("dijit.Dialog");
    dojo.require("dijit.form.CheckBox");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dijit.form.RadioButton");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.TitlePane");

    dojo.require("dijit.tree.ForestStoreModel");
    dojo.require("dijit.tree.TreeStoreModel");
    dojo.require("dijit.Tree");

    dojo.require("dojox.layout.FloatingPane");
    dojo.require("dojox.layout.ResizeHandle");

</script>
<script type="text/javascript">
function show(id) {
    var element = dojo.byId(id);
    if (element.style.display === "none") {
        element.style.display = "";
    }
}

function hide(id) {
    var element = dojo.byId(id);
    element.style.display = "none";
}
</script>
<style type="text/css">
body {
    padding: 10px;
}

.TreeComboBoxPopUp {
    min-width: 100px;
    min-height: 50px;
    max-width: 400px;
    max-height: 400px;
    overflow: auto;
    border: 1px solid black;
}

</style>
<script type="text/javascript">
dojo.addOnLoad(function() {

});
</script>
</head>
<body class="tundra">

  <div id="main" class="container">
    <div dojoType="dojo.data.ItemFileWriteStore" jsId="javaStore" url="./data/tree_java.json"></div>
    <div dojoType="dijit.tree.ForestStoreModel" jsId="javaTreeModel" store="javaStore" rootId="$root$" rootLabel="ROOT" childrenAttrs="children" deferItemLoadingUntilExpand="true" query="{topLevel: true}"></div>

    <!-- Tree Panel -->
    <div id="treePanel" dojoType="dijit.TitlePane" title="Tree" style="">
      <!-- Tree -->
      <div class="TreeComboBoxPopUp">
        <div id="tree" dojoType="dijit.Tree" model="javaTreeModel" showRoot="false" persist="false" openOnClick="true"></div>
      </div>
    </div>

    <!-- Help Panel -->
    <div id="helpPanel" dojoType="dijit.TitlePane" title="References" style="">
      <div id="helpPanelContent" style="position:relative; padding: 10px;border:1px solid black;">
        <ul>
          <li><a href="http://www.dojotoolkit.org/reference-guide/quickstart/data/usingdatastores.html" target="_blank">Using Datastores</a></li>
          <li><a href="http://www.dojotoolkit.org/reference-guide/quickstart/data/usingdatastores/lazyloading.html" target="_blank">Hierarchical data and access through dojo.data</a></li>
          <li><a href="http://www.dojotoolkit.org/reference-guide/dijit/Tree.html" target="_blank">dijit.Tree</a></li>
        </ul>
        <!-- Resize Handle -->
        <div id="resizeHandle" dojoType="dojox.layout.ResizeHandle" targetId="helpPanelContent"></div>
      </div>
    </div>

    <!-- Data Panel -->
    <div id="dataPanel" dojoType="dijit.TitlePane" title="Data - tree_java.json">
      <pre>
        <div id="container" dojoType="dijit.layout.ContentPane" duration="1000" preventCache="false" href="./data/tree_java.json">Loading data...</div>
      </pre>
    </div>

  </div>
</body>
</html>
